// 待办工单 -》 通信设备巡视
<template>
  <view class="equipment-tour-main">
    <nav-bar class="header" :background="backgroundColor" back title="通信设备" @goBack="goBack">
      <img v-if="isAddable" slot="scan" src="../../../../static/img/scan2.png" alt="" @click="scanClick">
      <img slot="screen" src="../../../../static/img/sx.png" alt="" @click="screen">
      <img v-if="isAddable" slot="iconfont" src="../../../../static/img/add.png" alt="" @click="toAddEquipment">
    </nav-bar>
    <view class="header-bar">
      <!-- 切换tab -->
      <div class="get-state-tab" >
        <div class="info-tab-item"
             :class="currentTab === 'unfinished' ? ' info-tab-current': ''"
             @click="tabChange('unfinished')">未完成</div>
        <div class="info-tab-item"
             :class="currentTab === 'finished' ? ' info-tab-current': ''"
             @click="tabChange('finished')">已完成</div>
      </div>
    </view>
    <!-- 搜索框  -->
    <view class="patrol-search">
      <van-search disabled show-action v-model="searchValue" 
        left-icon="" action-text="重置" 
        right-icon="search" placeholder="请输入设备名称" 
        @click="showSearch=true" @cancel="onSearch('')" />
    </view>
  
    <view class="patrol-main" v-if="taskList.length > 0">
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <!-- 列表循环   -->
        <!-- 未完成 -->
        <van-list
          v-model="isLoading"
          :finished="finished"
          finished-text="没有更多了"
          @load="loadMore"
        >
          <view class="patrol-list unfinished-list" v-if="currentTab === 'unfinished'" v-for="(item,index) in taskList" :key="index">
            <view class="patrol-title">
              <view class="patrol-title-left">
<!--                <img src="../../../../static/img/equipment.png" alt="">-->
                <text class="patrol-main-title">{{ item.name }}</text>
              </view>
<!--              <van-button type="info" class="patrol-btn" @click="toReceive(item)">巡视</van-button>-->
            </view>
            <hr class="patrol-hr">
            <view class="top-patrol-main">
              <view>
                <text class="patrol-big-rtitle">所属传输系统：</text>
                <text class="patrol-small-rtitle">{{ item.sysId }}</text>
              </view>
              <view>
                <text class="patrol-big-rtitle">所属通信网等级：</text>
                <text class="patrol-small-rtitle">{{ item.equlevel }}</text>
              </view>
              <view class="patrol-main-item">
                <text class="patrol-big-ltitle">设备类型：</text>
                <text class="patrol-small-ltitle">{{ item.techType }}</text>
              </view>
              <van-button type="info" class="patrol-btn" @click="toReceive(item)">巡视</van-button>
            </view>
          </view>

          <!-- 已完成部分 -->
          <view
            class="equip-list"
            @click="goEquipmentDetail(item)"
            v-for="(item,index) in taskList"
            v-if="currentTab === 'finished'"
            :key="index"
            :class="{equipWwc:item.state ==='未完成'}">
            <view class="top-equip">
<!--              <text class="equip-state-wc" v-if="item.tourState === 1">-->
<!--                <text style="color: #3CDA68">已完成</text>-->
<!--              </text>-->
<!--              <text class="equip-state-wwc" v-else-if="item.tourState === 0">-->
<!--                <text style="color: #FF7070">未完成</text>-->
<!--              </text>-->
              <text class="equip-title">{{ item.name }}</text>
            </view>
            <hr class="patrol-hr">
            <view class="equip-main">
              <view>
                <text class="equ-big-ltitle">设备分类：</text>
                <text class="equ-small-ltitle">{{ item.techType }}</text>
              </view>
              <view>
                <text class="equ-big-ltitle" v-if="item.state !== '未完成'">巡视人：</text>
                <text class="equ-small-ltitle" v-if="item.state !== '未完成'">{{ item.tourOperName }}</text>
              </view>
              <view>
                <text class="equ-big-ltitle">巡视时间：</text>
                <text class="equ-small-ltitle">{{ item.tourTimStr }}</text>
              </view>
              <view>
                <text class="equ-big-ltitle">巡视结果：</text>
                <text class="equ-small-result">
                  <text style="color: #417ADC;" v-if="item.serviceState == 1">一致</text>
                  <text style="color: #FF4355;" v-if="item.serviceState == 2">不存在</text>
                  <text style="color: #41DC83;" v-if="item.serviceState == 3">新增</text>
                  <text style="color: #FFAD0E;" v-if="item.serviceState == 4">更新</text>
                </text>
              </view>
            </view>
          </view>

        </van-list>
      </van-pull-refresh>
    </view>
    <!--弹出搜索页-->
    <van-popup v-model="showSearch" position="right">
      <search @cancel="showSearch = false;" @search="onSearch" :empty="showSearch"/>
    </van-popup>
    <!--筛选弹窗-->
    <screenPopup
      :type-list="typeList"
      :showScreen="showScreen"
      @closePopup="showScreen=false"
      @confirm="confirmCondition"
    />
    <!--绑定设备弹窗-->
    <van-popup v-model="showSelectEquipment" position="right">
      <select-equipment :equObj="selectEqumentOption" @cancel="equCancel" :selected.sync="equKeys" @changeSelected="changeEquSelected($event)" >
        <img slot="headAdd"  src="../../../../static/img/add.png" alt="" @click="equAddSubmit">
      </select-equipment>
    </van-popup>
  </view>
</template>

<script>
import navBar from '../../../../components/common/nav-bar'
import screenPopup from "../../../../components/common/screenPopup";
import selectEquipment from '../../../common/selectEquipment'
import search from "../../../common/search";


import wx from "../../../../static/common_js/jweixin_1.0.0";
import { Dialog } from 'vant';
import { mapGetters } from 'vuex'

export default {
  name: "equipmentTour",
  components: { navBar, screenPopup, search, selectEquipment },
  props: {},
  data() {
    return {
      currentTab: "unfinished", // 当前显示内容 unfinished 未完成 finished 认领
      backgroundColor:'#417ADC',
      refreshing: false, // 是否正在刷新
      isLoading: false,
      showScreen: false,
      showSearch: false,
      searchValue:'',
      taskList:[], // 通信设备列表
      requestParams: {
        "taskId":"test001",    //工单ID    必填
        "state": "0",        //是否完成    必填    0未完成，1已完成
        "name": "",            //设备名称    非必填
        "equlevel": "",        //设备归属    非必填
        "techType": "",        //设备类型    非必填
        "limit": 20,        //分页大小    非必填    不填默认查全部
        "page": 1            //分页页数    非必填 不填默认查全部
      },
      total: 0, // 总条数
      finished: false,
      typeList: [], // 筛选条件列表
      taskType: '', // 返回计划工单所需参数
      taskSiteId: '',
      taskSiteName: '',
      showSelectEquipment: false,
      selectEqumentOption: {
        equType: 'equipment',
        siteId: '',
        batchId: ''
      },
      equKeys: {
        NAME: '',
        ORGID: ''
      },
      isAddable: false // 是否可新增
    };
  },
  onLoad (options) {
    this.isAddable = options.state === '99' ? false : true;
    this.requestParams.taskId = options.taskId;
    this.taskType= options.state
    this.taskSiteId = options.taskSiteId
    this.taskSiteName= options.taskSiteName
  },
  computed: {
    ...mapGetters(['userData'])
  },
  mounted() {
    this.getTodoTask();
    this.getTypeList();
  },
  methods: {
    getTypeList () {
      let typeList = []
      this.$api.todoTaskApi.techTypeList({ "type":"techType" })
        .then(res => {
          typeList.push({
            title: "设备类型",
            optionList: res.data.map(item => {
              !item.VALUE ? (item.VALUE = '') : null;
              return item
            }),
            type: "techType"
          })

          return this.$api.todoTaskApi.equLevelList({ "type":"equLevel" })
        })
        .then(res => {
          typeList.push({
            title: "设备归属",
            optionList: res.data.map(item => {
              !item.VALUE ? (item.VALUE = '') : null;
              return item
            }),
            type: "equlevel"
          })

          this.typeList = typeList;
        })
    },
    confirmCondition (selected) {
      this.requestParams = {
        ...this.requestParams,
        ...selected,
      }

      this.onRefresh()
    },
    getTodoTask () {
      this.$api.todoTaskApi.communicationEquipmentList(this.requestParams).then(res => {
        this.isLoading = false;
        this.refreshing = false;
        this.taskList = this.taskList.concat(res.data.list);
        this.total = +res.data.total;
      })
    },
    onRefresh() {
      this.refreshing = true;
      this.finished = false;
      this.requestParams.page = 1;
      this.taskList = [];
      this.getTodoTask();
    },
    loadMore () {
      if (this.total > this.taskList.length) {
        this.requestParams.page = this.requestParams.page + 1;
        this.getTodoTask();
      } else {
        this.finished = true;
      }
    },
    goBack() {
      uni.navigateTo({
        url: `/pages/workBench/todoTask/taskList/taskList?id=${this.requestParams.taskId}&state=${this.taskType}&taskSiteName=${this.taskSiteName}`
      })
    },
    screen() {
      this.showScreen = true;
    },
    onSearch(searchValue) {
      this.searchValue = searchValue;
      this.requestParams.name = this.searchValue;
      this.onRefresh();
      this.showSearch = false;
    },
    // 跳转
    toAddEquipment() {
      uni.navigateTo({
        url: `/pages/workBench/todoTask/equipmentTour/completeEquipmentInfo?type=add&taskId=${this.requestParams.taskId}&taskSiteId=${this.taskSiteId}&taskSiteName=${this.taskSiteName}&state=${this.taskType}`
      })
    },
    toReceive(item) {
      uni.navigateTo({
        url: `/pages/workBench/todoTask/equipmentTour/equipmentPatrol?objId=${item.objId}&taskId=${item.taskId}&state=${this.taskType}&taskSiteId=${this.taskSiteId}&taskSiteName=${this.taskSiteName}`
      })
    },
    goEquipmentDetail (item) {
      uni.navigateTo({
        url: `/pages/workBench/todoTask/equipmentTour/equipmentDetail?objId=${item.objId}&taskId=${item.taskId}&state=${this.taskType}&taskSiteId=${this.taskSiteId}&taskSiteName=${this.taskSiteName}`
      })
    },
    tabChange(currentTab) {
      this.currentTab = currentTab;
      (this.currentTab === "finished") && (this.requestParams.state = '1');
      (this.currentTab === "unfinished") && (this.requestParams.state = '0');
      this.onRefresh()
    },
    // 扫码
    scanClick() {
      const _this = this
      wx.scanQRCode({
        desc:"scanQRCode desc",
        needResult: 1,
        scanType:["qrCode"],
        success:function(res){
          let scanCodeId = res.resultStr
          _this.getScanCodeE(scanCodeId)
        },
        error:function(res){
          console.log("scanQRCode error",res);
        }
      });
    },
    equCancel(){
      this.showSelectEquipment = false
    },
    changeEquSelected(value){
      // 台帐中有此设备 巡视该设备
      uni.navigateTo({
        url: `/pages/workBench/todoTask/equipmentTour/equipmentPatrol?objId=${value.ORGID}&taskId=${this.requestParams.taskId}&state=${this.taskType}&taskSiteId=${this.taskSiteId}&taskSiteName=${this.taskSiteName}`
      })
      this.showSelectEquipment = false
    },
    equAddSubmit(){
      // 认定设备不存在新增信息
      uni.navigateTo({
        url: `/pages/workBench/todoTask/equipmentTour/completeEquipmentInfo?type=add&taskId=${this.requestParams.taskId}&taskSiteId=${this.taskSiteId}&taskSiteName=${this.taskSiteName}&state=${this.taskType}` // &taskSiteId=${this.taskSiteId}&taskSiteName=${this.taskSiteName}&state=${this.taskType}
      })
    },
  // 判断进行跳转  设备台账存在  设备信息不存在  设备已核查
    getScanCodeE(scanCodeId) {
      let params = {
        taskId: this.requestParams.taskId,
        entityId: scanCodeId // 设备扫码id
      }
      this.$api.getScanCode(params).then(res => {
        if(res.data.flag === true) {
        //设备台账存在
          uni.navigateTo({
            url: `/pages/workBench/todoTask/equipmentTour/equipmentPatrol?objId=${res.data.objId}&taskId=${this.requestParams.taskId}&state=${this.taskType}&taskSiteId=${this.taskSiteId}&taskSiteName=${this.taskSiteName}`
          })
        }else if(res.data.flag === 'false') {
        //设备信息不存在
          Dialog.confirm({
            message: '未匹配到设备信息，是否去绑定？',
            cancelButtonText: '返回列表',
            confirmButtonText: '绑定设备'
          }).then(() => {
            this.selectEqumentOption.batchId = this.userData.batchId;
            this.selectEqumentOption.siteId = this.taskSiteId;
            this.showSelectEquipment = true;
          }).catch(() => {
            uni.navigateTo({
              url: `/pages/workBench/todoTask/equipmentTour/equipmentTour?taskId=${this.requestParams.taskId}&state=${this.taskType}&taskSiteId=${this.taskSiteId}&taskSiteName=${this.taskSiteName}`
            })
          })
        }else if(res.data.flag === more) {
          //设备已核查
          Dialog.confirm({
            message: '该工单下有多个设备，请手动扫码',
            cancelButtonText: '返回列表',
          }).then(() => {
            this.scanClick()
          }).catch(() => {
            uni.navigateTo({
              url: `/pages/workBench/todoTask/equipmentTour/equipmentTour?taskId=${this.requestParams.taskId}&state=${this.taskType}&taskSiteId=${this.taskSiteId}&taskSiteName=${this.taskSiteName}`
            })
          })
        }else{
        //设备已核查
          Dialog.confirm({
            message: '该设备已巡视，是否重新扫码核查？',
            cancelButtonText: '返回列表',
            confirmButtonText: '继续扫码'
          }).then(() => {
            this.scanClick()
          }).catch(() => {
            uni.navigateTo({
              url: `/pages/workBench/todoTask/equipmentTour/equipmentTour?taskId=${this.requestParams.taskId}&state=${this.taskType}&taskSiteId=${this.taskSiteId}&taskSiteName=${this.taskSiteName}`
            })
          })
        }
      })
    }
  }
};
</script>

<style scoped lang="scss">
.equipment-tour-main {
  height: 100vh;
  background: #F2F6FA;
  overflow: hidden;
  .header {
    img {
      width: px2vw(48);
      margin-right: px2vw(40);
    }
  }
  .header-bar {
    height: px2vh(220);
    border-radius: 0 0 px2vh(40) px2vh(40);
    background: #417ADC;
     //margin-bottom: px2vh(130);
    display: flex;
    justify-content: center;
    .get-state-tab {
      width: calc(100% - #{px2vw(60)});
      height: px2vh(120);
      border-radius: px2vw(20);
      box-sizing: border-box;
      // margin: px2vh(40) px2vw(30) px2vh(37);
      background-color: rgba(255,255,255,0.4);
      display: flex;
      justify-content: center;
      align-items: center;
      border: px2vw(2) solid rgba(198,215,245,1);
      .info-tab-item {
        width: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        color: rgba(255,255,255,1);
        font-weight: bold;
        font-size: px2vw(38);
        &.info-tab-current {
          height: px2vh(100);
          margin: 0 px2vw(10);
          margin-right: px2vw(10);
          border-radius: px2vw(20);
          background-color: rgba(255,255,255,0.7);
          color: rgba(65,122,220,1);
          font-weight: Bold;
        }
      }
    }
  }
  .patrol-search {
    width: px2vw(1020);
    height: 38px;
    margin: px2vw(30) px2vh(30);
    position: relative;
    top: px2vh(-75);
    border-radius: px2vw(20);
    overflow: hidden;
    
    .van-search {
      padding: 0 0;
      height: 38px;
      
    }
    .van-search__content {
      background: #fff;
      height: 38px;
    }
    /deep/.van-field__control {
      height: 30px;
    }
  }
  .patrol-main {
    height: calc(100vh - #{px2vh(423)} - 20px);
    overflow: auto;
    margin-top: px2vh(-65);
    padding-bottom: px2vh(30);
    .patrol-list {
      width: px2vw(1020);
      background: #fff;
      border-radius: px2vw(20) px2vh(20);
      padding-bottom: px2vh(30);
      margin: 0  px2vw(30) px2vh(30) px2vw(30) ;
      .patrol-title {
        width: px2vw(940);
        //height: px2vh(80);
        margin-left: px2vw(40);
        padding-top: px2vw(30);
        margin-bottom: px2vh(30);
        display: flex;
        align-items: center;
        justify-content: space-between;
  
        .patrol-title-left {
          display: flex;
          align-items: center;
          img {
            width: px2vw(64);
            height: px2vw(64);
          }
        }

        .patrol-main-title {
          //width: px2vw(600);
          margin-left: px2vw(20);
          margin-top: px2vh(8);
          font-size: px2vh(48);
          //white-space: nowrap;
          //overflow: hidden;
          //text-overflow: ellipsis;
          //float: left;
        }
        //.patrol-btn {
        //  width: px2vw(200);
        //  height: px2vh(80);
        //  background: #417ADC;
        //  float: right;
        //  border-radius: px2vh(40) px2vh(40);
        //}
      }
      .patrol-hr {
        width: px2vw(940);
        border: px2vh(1) solid #e5e5e5;
        margin-left: px2vw(40);
        margin-bottom: px2vh(42);
      }
      .top-patrol-main {
        position: relative;
        width: px2vw(900);
        font-size: px2vh(36);
        line-height: px2vh(62);
        margin-left: px2vw(60);
        .patrol-big-ltitle,.patrol-big-rtitle {
          color: #666;
        }
        .patrol-small-ltitle,.patrol-small-rtitle {
          margin-left: px2vw(25);
          color: #333;
        }
        .patrol-big-rtitle {
          // margin-left: px2vw(245);
        }
        .patrol-btn {
          position: absolute;
          right: 0;
          top: 50%;
          transform: translateY(-50%);
          width: px2vw(200);
          height: px2vh(80);
          background: #417ADC;
          //float: right;
          border-radius: px2vh(40) px2vh(40);
        }
      }
      .bottom-state-bar {
        margin-left: px2vw(60);
        width: px2vw(900);
        display: flex;
        justify-content: space-between;
        line-height: px2vh(62);
        font-size: px2vh(36);
      }
    }


    .equip-list, .equipWwc {
      width: px2vw(1020);
      padding-bottom: px2vh(30);
      background: #fff;
      border-radius: px2vw(20) px2vh(20);
      margin: px2vw(30) px2vh(30);
      
      .top-equip {
        width: calc(100% - #{px2vw(80)});
        margin-left: px2vw(40);
        padding-top: px2vw(30);
        margin-bottom: px2vh(30);
        //height: px2vh(140);
        display: flex;
        align-items: center;
        
        img {
          width: px2vw(64);
          height: px2vw(64);
          margin-top: px2vh(40);
          float: left;
        }
        
        .equip-title {
          color: #333;
          font-size: px2vw(48);
          //width: px2vw(700);
          //height: px2vh(48);
          //line-height: px2vh(48);
          //float: left;
          //white-space: nowrap;
          //overflow: hidden;
          //text-overflow: ellipsis;
          //margin-top: px2vh(48);
          margin-left: px2vw(25);
        }
        
        .equip-state-wc, .equip-state-wwc {
          width: px2vw(123);
          height: px2vh(50);
          font-size: px2vw(32);
          border-radius: px2vw(10);
          //margin-top: px2vh(48);
          //margin-left: px2vw(25);
          //float: right;
          text-align: center;
        }
        
        .equip-state-wc {
          background: rgba(62, 218, 104, 0.1);
        }
        
        .equip-state-wwc {
          background: rgba(255, 112, 112, 0.1);
        }
      }
      
      .patrol-hr {
        width: px2vw(940);
        border: px2vh(1) solid #e5e5e5;
        margin-left: px2vw(40);
        margin-bottom: px2vh(42);
      }
      
      .equip-main {
        width: px2vw(888);
        font-size: px2vh(36);
        line-height: px2vh(62);
        margin-left: px2vw(62);
        margin-top: px2vh(20);
        
        .equ-big-ltitle, .equ-big-rtitle {
          color: #666;
        }
        
        .equ-small-ltitle, .equ-small-rtitle {
          margin-left: px2vw(25);
          color: #333;
        }
        
        .equ-big-rtitle {
          margin-left: px2vw(245);
        }
        
        .equ-big-result {
          color: #666;
          margin-left: px2vw(72);
        }
        
        .equ-small-result {
          color: #41DC83;
          margin-left: px2vw(29);
        }
      }
    }
    
    .equipWwc {
      height: px2vh(252);
    }
  }
}
</style>